<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue测试</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
插值表达式规范
1.{{}}插值表达式中的变量必须存在
2.{{}}插值表达式中不能写语句，比如if，for等
3.{{}}插值表达式不能配置在属性中 比如： title="{{count}}"
-->

<body>
    <div id="app">
        <p>{{ name.toUpperCase() + '你好'}}</p>
        <p>{{age > 18 ? '成年' : '未成年'}}</p>
        <p>{{sex == 'meal' ? '男' : '女'}}</p>

        <p>{{ '朋友的姓名'+ friend.name}}</p>
        <p>{{friend.age > 18 ? '成年' : '未成年'}}</p>
        <p>{{friend.sex == 'meal' ? '男' : '女'}}</p>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: 'tony',
                age: 34,
                sex: 'meal',
                friend: {
                    name: 'json',
                    age: 10,
                    sex: 'fmeal',
                }
            }
        })
    </script>

</body>

</html>